<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Pagination.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Pagination.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Pagination.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;리스트에&nbsp;페이지&nbsp;목록&nbsp;매기고&nbsp;페이지에&nbsp;따른&nbsp;네비게이션을&nbsp;구현한&nbsp;컴포넌트
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	리스트에&nbsp;페이지&nbsp;목록&nbsp;매기고&nbsp;페이지에&nbsp;따른&nbsp;네비게이션을&nbsp;구현한&nbsp;컴포넌트
	기본&nbsp;목록은&nbsp;마크업에&nbsp;static하게&nbsp;정의되어있고,&nbsp;페이지&nbsp;이동을위해&nbsp;클릭시마다&nbsp;보여줄&nbsp;아이템&nbsp;목록을&nbsp;Ajax&nbsp;Call을&nbsp;통해&nbsp;받아온다.
	페이지&nbsp;컴포넌트가&nbsp;로드되면&nbsp;.loaded&nbsp;클래스명이&nbsp;추가된다.
	
	@class&nbsp;jindo.Pagination
	@extends&nbsp;jindo.UIComponent
	@keyword&nbsp;pagination,&nbsp;page,&nbsp;페이지,&nbsp;목록
**/
jindo.Pagination&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Pagination.prototype&nbsp;*/
	
	/**
		@constructor
		@param&nbsp;{String&nbsp;|&nbsp;HTMLElement}&nbsp;sId&nbsp;페이지목록을&nbsp;생성할&nbsp;엘리먼트&nbsp;id&nbsp;혹은&nbsp;엘리먼트&nbsp;자체
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{Boolean}&nbsp;[htOption.bActivateOnload=true]&nbsp;Pagination&nbsp;컴포넌트가&nbsp;로딩될&nbsp;때&nbsp;활성화시킬지&nbsp;여부.&nbsp;false로&nbsp;설정하는&nbsp;경우에는&nbsp;oPagination.activate()를&nbsp;호출하여&nbsp;따로&nbsp;활성화&nbsp;시켜줘야&nbsp;한다.
			@param&nbsp;{Number}&nbsp;[htOption.nItem=10]&nbsp;리스트의&nbsp;전체&nbsp;아이템&nbsp;개수
			@param&nbsp;{Number}&nbsp;[htOption.nItemPerPage=10]&nbsp;한&nbsp;페이지에&nbsp;표시&nbsp;될&nbsp;아이템의&nbsp;개수를&nbsp;정의한다.
			@param&nbsp;{Number}&nbsp;[htOption.nPagePerPageList=10]&nbsp;페이지&nbsp;목록에&nbsp;표시&nbsp;될&nbsp;페이지의&nbsp;개수를&nbsp;정의한다.
			@param&nbsp;{Number}&nbsp;[htOption.nPage=1]&nbsp;Pagination&nbsp;컴포넌트가&nbsp;로딩되었을&nbsp;때&nbsp;보여&nbsp;주는&nbsp;페이지이다.&nbsp;기본값으로는&nbsp;1이&nbsp;설정된다.&nbsp;아래의&nbsp;이미지에서는&nbsp;12페이지를&nbsp;선택한&nbsp;경우이다.
			@param&nbsp;{String}&nbsp;[htOption.sMoveUnit=&quot;pagelist&quot;]&nbsp;이전/다음&nbsp;버튼을&nbsp;누르는&nbsp;경우&nbsp;한&nbsp;페이지씩(page)&nbsp;또는&nbsp;페이지&nbsp;목록(pagelist)&nbsp;단위로&nbsp;이동하게&nbsp;해주는&nbsp;설정&nbsp;값이다.
			&lt;ul&gt;
			&lt;li&gt;pagelist&nbsp;:&nbsp;nPagePerPageList로&nbsp;설정한&nbsp;값&nbsp;기준으로&nbsp;이동한다.(기본값&nbsp;기준으로&nbsp;10페이지)&lt;/li&gt;
			&lt;li&gt;page&nbsp;:&nbsp;한&nbsp;페이지&nbsp;씩&nbsp;이동한다.&lt;/li&gt;
			&lt;/ul&gt;
			@param&nbsp;{Boolean}&nbsp;[htOption.bAlignCenter=false]&nbsp;bAlignCenter&nbsp;옵션&nbsp;값은&nbsp;현재&nbsp;페이지가&nbsp;항상&nbsp;가운데에&nbsp;오도록&nbsp;정렬해주는&nbsp;값이다.&nbsp;이전&nbsp;또는&nbsp;다음&nbsp;버튼을&nbsp;눌러서&nbsp;페이지를&nbsp;이동하는&nbsp;경우&nbsp;이동&nbsp;된&nbsp;페이지가&nbsp;중앙에&nbsp;오게&nbsp;된다.&lt;br/&gt;※&nbsp;bAlignCenter를&nbsp;사용할&nbsp;때는&nbsp;sMoveUnit이&nbsp;항상&nbsp;&quot;page&quot;로&nbsp;설정되어야&nbsp;한다.
			@param&nbsp;{String}&nbsp;[htOption.sInsertTextNode=&quot;&quot;]&nbsp;페이지&nbsp;목록에서&nbsp;페이지의&nbsp;마크업들을&nbsp;연결해주는&nbsp;문자열이다.&nbsp;설정&nbsp;값에&nbsp;따라서&nbsp;각각의&nbsp;페이지를&nbsp;보여주는&nbsp;노드&nbsp;(예&nbsp;&lt;a&nbsp;href=&quot;#&quot;&gt;11&lt;/a&gt;&lt;a&nbsp;href=&quot;#&quot;&gt;12&lt;/a&gt;에서&nbsp;a태그)를&nbsp;&quot;&nbsp;&quot;&nbsp;또는&nbsp;&quot;&nbsp;&quot;등으로&nbsp;설정해서&nbsp;변경할&nbsp;수&nbsp;있다.&nbsp;(위의&nbsp;예에서는&nbsp;a태그&nbsp;사이의&nbsp;간격이&nbsp;한&nbsp;줄&nbsp;또는&nbsp;하나의&nbsp;공백문자로&nbsp;변경되게&nbsp;된다.)&lt;br/&gt;※&nbsp;주의할&nbsp;점은&nbsp;이&nbsp;옵션에&nbsp;따라&nbsp;렌더링이&nbsp;달라질&nbsp;수&nbsp;있다는&nbsp;점이다.
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;&quot;]&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{String}&nbsp;[htOption.sClassFirst=&quot;first-child&quot;]&nbsp;페이지&nbsp;목록에서&nbsp;첫&nbsp;번째&nbsp;페이지&nbsp;항목에&nbsp;추가되는&nbsp;클래스명
			@param&nbsp;{String}&nbsp;[htOption.sClassLast=&quot;last-child&quot;]&nbsp;페이지&nbsp;목록에서&nbsp;마지막&nbsp;페이지&nbsp;항목에&nbsp;추가되는&nbsp;클래스명
			@param&nbsp;{String}&nbsp;[htOption.sPageTemplate]&nbsp;1,&nbsp;2,&nbsp;3,&nbsp;..&nbsp;과&nbsp;같은&nbsp;페이지를&nbsp;보여주는&nbsp;엘리먼트를&nbsp;어떤&nbsp;마크업으로&nbsp;보여줄&nbsp;지를&nbsp;설정한다.&nbsp;{=page}가&nbsp;페이지&nbsp;번호로&nbsp;교체된다.&nbsp;(jindo.$Template&nbsp;참고)&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;<code>&amp;lt;a&amp;nbsp;href=&amp;#39;#&amp;#39;&amp;gt;{=page}&amp;lt;&#x2F;a&amp;gt;</code>
			@param&nbsp;{String}&nbsp;[htOption.sCurrentPageTemplate]&nbsp;페이지&nbsp;목록에서&nbsp;보여주고&nbsp;있는&nbsp;현재&nbsp;페이지를&nbsp;어떻게&nbsp;보여줄&nbsp;지&nbsp;설정하는&nbsp;마크업&nbsp;템플릿이다.&nbsp;{=page}가&nbsp;현재&nbsp;페이지&nbsp;번호로&nbsp;교체된다.&nbsp;(jindo.$Template&nbsp;참고)&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;<code>&amp;lt;strong&amp;gt;{=page}&amp;lt;&#x2F;strong&amp;gt;</code>
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elFirstPageLinkOn]&nbsp;페이지&nbsp;목록에서&nbsp;페이지의&nbsp;맨&nbsp;처음으로&nbsp;이동하는&nbsp;버튼으로&nbsp;사용되는&nbsp;엘리먼트이다.&nbsp;처음으로&nbsp;이동할&nbsp;수&nbsp;있는&nbsp;경우만&nbsp;노출되며&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;<code>pre_end</code>&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;a&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;<code>pre_end</code>&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;a&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elPrevPageLinkOn]&nbsp;페이지&nbsp;목록에서&nbsp;이전&nbsp;페이지&nbsp;또는&nbsp;이전&nbsp;페이지목록으로&nbsp;이동하는&nbsp;버튼으로&nbsp;사용되는&nbsp;엘리먼트이다.&nbsp;이전으로&nbsp;이동할&nbsp;수&nbsp;있는&nbsp;경우만&nbsp;노출되며&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;pre&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;a&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;pre&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;a&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elNextPageLinkOn]&nbsp;페이지&nbsp;목록에서&nbsp;다음&nbsp;페이지&nbsp;또는&nbsp;다음&nbsp;페이지목록으로&nbsp;이동하는&nbsp;버튼으로&nbsp;사용되는&nbsp;엘리먼트이다.&nbsp;다음으로&nbsp;이동할&nbsp;수&nbsp;있는&nbsp;경우만&nbsp;노출되며&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;next&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;a&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;next&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;a&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elLastPageLinkOn]&nbsp;페이지&nbsp;목록에서&nbsp;페이지의&nbsp;맨&nbsp;마지막으로&nbsp;이동하는&nbsp;버튼으로&nbsp;사용되는&nbsp;엘리먼트이다.&nbsp;마지막으로&nbsp;이동할&nbsp;수&nbsp;있는&nbsp;경우만&nbsp;노출되며&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;<code>next_end</code>&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;a&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;<code>next_end</code>&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;a&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elFirstPageLinkOff]&nbsp;elFirstPageLinkOn과는&nbsp;반대로&nbsp;처음으로&nbsp;이동할&nbsp;수&nbsp;없는&nbsp;경우에&nbsp;사용자에게&nbsp;비활성화된&nbsp;상태를&nbsp;보여주기&nbsp;위한&nbsp;엘리먼트이다.&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;<code>pre_end</code>&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;span&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;<code>pre_end</code>&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;span&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elPrevPageLinkOff]&nbsp;elPrevPageLinkOn과는&nbsp;반대로&nbsp;이전으로&nbsp;이동할&nbsp;수&nbsp;없는&nbsp;경우에&nbsp;사용자에게&nbsp;비활성화된&nbsp;상태를&nbsp;보여주기&nbsp;위한&nbsp;엘리먼트이다.&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;pre&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;span&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;pre&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;span&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elNextPageLinkOff]&nbsp;elNextPageLinkOn과는&nbsp;반대로&nbsp;다음으로&nbsp;이동할&nbsp;수&nbsp;없는&nbsp;경우에&nbsp;사용자에게&nbsp;비활성화된&nbsp;상태를&nbsp;보여주기&nbsp;위한&nbsp;엘리먼트이다.&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;next&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;span&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;next&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;span&nbsp;엘리먼트
			@param&nbsp;{HTMLElement}&nbsp;[htOption.elLastPageLinkOff]&nbsp;elLastPageLinkOn과는&nbsp;반대로&nbsp;마지막으로&nbsp;이동할&nbsp;수&nbsp;없는&nbsp;경우에&nbsp;사용자에게&nbsp;비활성화된&nbsp;상태를&nbsp;보여주기&nbsp;위한&nbsp;엘리먼트이다.&nbsp;값을&nbsp;지정하지&nbsp;않거나&nbsp;<code>next_end</code>&nbsp;클래스&nbsp;명을&nbsp;가진&nbsp;span&nbsp;엘리먼트가&nbsp;존재하지&nbsp;않으면&nbsp;버튼이&nbsp;생성되지&nbsp;않는다.&lt;br/&gt;기본&nbsp;값&nbsp;:&nbsp;페이지&nbsp;목록&nbsp;엘리먼트&nbsp;아래의&nbsp;<code>next_end</code>&nbsp;클래스&nbsp;명을&nbsp;가지고&nbsp;있는&nbsp;span&nbsp;엘리먼트
		@example&nbsp;
			var&nbsp;oPagination&nbsp;=&nbsp;new&nbsp;jindo.Pagination(&quot;paginate&quot;,&nbsp;{
				nItem&nbsp;:&nbsp;1000,&nbsp;//(Number)&nbsp;전체&nbsp;아이템&nbsp;개수
				nItemPerPage&nbsp;:&nbsp;10,&nbsp;//(Number)&nbsp;한&nbsp;페이지에&nbsp;표시될&nbsp;아이템&nbsp;개수
				nPagePerPageList&nbsp;:&nbsp;10,&nbsp;//(Number)&nbsp;페이지목록에&nbsp;표시될&nbsp;페이지&nbsp;개수
				nPage&nbsp;:&nbsp;1,&nbsp;//(Number)&nbsp;초기&nbsp;페이지
				sMoveUnit&nbsp;:&nbsp;&quot;pagelist&quot;,&nbsp;//(String)&nbsp;페이지목록&nbsp;이동시&nbsp;이동&nbsp;단위&nbsp;&quot;page&quot;&nbsp;||&nbsp;&quot;pagelist&quot;
				bAlignCenter&nbsp;:&nbsp;false,&nbsp;//(Boolean)&nbsp;현재페이지가&nbsp;항상&nbsp;가운데&nbsp;위치하도록&nbsp;정렬.&nbsp;sMoveUnit이&nbsp;&quot;page&quot;일&nbsp;때만&nbsp;사용
				sInsertTextNode&nbsp;:&nbsp;&quot;&quot;,&nbsp;//(String)&nbsp;페이지리스트&nbsp;생성시에&nbsp;각각의&nbsp;페이지&nbsp;노드를&nbsp;한줄로&nbsp;붙여쓰지&nbsp;않게&nbsp;하기&nbsp;위해서는&nbsp;&quot;\n&quot;&nbsp;또는&nbsp;&quot;&nbsp;&quot;를&nbsp;설정한다.&nbsp;이&nbsp;옵션에&nbsp;따라&nbsp;렌더링이&nbsp;달라질&nbsp;수&nbsp;있다.
				sClassPrefix&nbsp;:&nbsp;&quot;pagination-&quot;,&nbsp;//(String)&nbsp;컴포넌트에서&nbsp;사용되는&nbsp;클래스의&nbsp;Prefix&nbsp;
				sClassFirst&nbsp;:&nbsp;&quot;first-child&quot;,&nbsp;//(String)&nbsp;첫번째&nbsp;페이지리스트에&nbsp;추가될&nbsp;클래스명
				sClassLast&nbsp;:&nbsp;&quot;last-child&quot;,&nbsp;//(String)&nbsp;마지막&nbsp;페이지리스트에&nbsp;추가될&nbsp;클래스명
				sPageTemplate&nbsp;:&nbsp;&quot;&lt;a&nbsp;href=&#39;#&#39;&gt;{=page}&lt;/a&gt;&quot;,&nbsp;//(String)&nbsp;페이지에&nbsp;대한&nbsp;템플릿.&nbsp;{=page}부분이&nbsp;페이지&nbsp;번호로&nbsp;대치된다.&nbsp;
				sCurrentPageTemplate&nbsp;:&nbsp;&quot;&lt;strong&gt;{=page}&lt;/strong&gt;&quot;,&nbsp;//(String)&nbsp;현재페이지에&nbsp;대한&nbsp;템플릿.&nbsp;{=page}부분이&nbsp;페이지&nbsp;번호로&nbsp;대치된다.
				elFirstPageLinkOn&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;처음&#39;&nbsp;링크엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;pre_end&nbsp;클래스명을&nbsp;가지는&nbsp;a&nbsp;엘리먼트이다.
				elPrevPageLinkOn&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;이전&#39;&nbsp;링크엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;pre&nbsp;클래스명을&nbsp;가지는&nbsp;a&nbsp;엘리먼트이다.
				elNextPageLinkOn&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;다음&#39;&nbsp;링크엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;next&nbsp;클래스명을&nbsp;가지는&nbsp;a&nbsp;엘리먼트이다.
				elLastPageLinkOn&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;마지막&#39;&nbsp;링크엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;next_end&nbsp;클래스명을&nbsp;가지는&nbsp;a&nbsp;엘리먼트이다.
				elFirstPageLinkOff&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;처음&#39;&nbsp;엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;pre_end&nbsp;클래스명을&nbsp;가지는&nbsp;span&nbsp;엘리먼트이다.
				elPrevPageLinkOff&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;이전&#39;&nbsp;엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;pre&nbsp;클래스명을&nbsp;가지는&nbsp;span&nbsp;엘리먼트이다.
				elNextPageLinkOff&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;다음&#39;&nbsp;엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;next&nbsp;클래스명을&nbsp;가지는&nbsp;span&nbsp;엘리먼트이다.
				elLastPageLinkOff&nbsp;:&nbsp;(HTMLElement)&nbsp;&#39;마지막&#39;&nbsp;엘리먼트.&nbsp;기본&nbsp;값은&nbsp;기준&nbsp;엘리먼트&nbsp;아래&nbsp;next_end&nbsp;클래스명을&nbsp;가지는&nbsp;span&nbsp;엘리먼트이다.
			}).attach({
				beforeMove&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//페이지&nbsp;이동이&nbsp;수행되기&nbsp;직전에&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	nPage&nbsp;:&nbsp;(Number)&nbsp;이동하려는&nbsp;페이지
					//}
					//oCustomEvent.stop()을&nbsp;수행하면&nbsp;페이지&nbsp;이동(move&nbsp;이벤트)이&nbsp;일어나지&nbsp;않는다.
				},
				move&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//페이지&nbsp;이동이&nbsp;완료된&nbsp;이후&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	nPage&nbsp;:&nbsp;(Number)&nbsp;현재&nbsp;페이지
					//}
				},
				click&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//페이지&nbsp;이동을&nbsp;위한&nbsp;숫자나&nbsp;버튼을&nbsp;클릭했을때&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	nPage&nbsp;:&nbsp;(Number)&nbsp;클릭해서&nbsp;이동할&nbsp;페이지
					//	weEvent&nbsp;:&nbsp;(jindo.$Event)&nbsp;click시&nbsp;발생되는&nbsp;jindo.$Event&nbsp;객체
					//}
					//oCustomEvent.stop()을&nbsp;수행하면&nbsp;페이지&nbsp;이동(beforeMove,&nbsp;move&nbsp;이벤트)이&nbsp;일어나지&nbsp;않는다.
				}
			});
	**/
	$init&nbsp;:&nbsp;function(sId,&nbsp;htOption){
		this._elPageList&nbsp;=&nbsp;jindo.$(sId);
		this._welPageList&nbsp;=&nbsp;jindo.$Element(this._elPageList);
		this._waPage&nbsp;=&nbsp;jindo.$A([]);
		
		this._fClickPage&nbsp;=&nbsp;jindo.$Fn(this._onClickPageList,&nbsp;this);
		
		this.option({
			bActivateOnload&nbsp;:&nbsp;true,
			nItem&nbsp;:&nbsp;10,
			nItemPerPage&nbsp;:&nbsp;10,
			nPagePerPageList&nbsp;:&nbsp;10,
			nPage&nbsp;:&nbsp;1,
			sMoveUnit&nbsp;:&nbsp;&quot;pagelist&quot;,
			bAlignCenter&nbsp;:&nbsp;false,
			sInsertTextNode&nbsp;:&nbsp;&quot;&quot;,
			sClassPrefix&nbsp;:&nbsp;&quot;&quot;,
			sClassFirst&nbsp;:&nbsp;&quot;first-child&quot;,
			sClassLast&nbsp;:&nbsp;&quot;last-child&quot;,
			sPageTemplate&nbsp;:&nbsp;&quot;&lt;a&nbsp;href=&#39;#&#39;&gt;{=page}&lt;/a&gt;&quot;,
			sCurrentPageTemplate&nbsp;:&nbsp;&quot;&lt;strong&gt;{=page}&lt;/strong&gt;&quot;,
			elFirstPageLinkOn&nbsp;:&nbsp;jindo.$$.getSingle(&quot;a.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;pre_end&quot;),&nbsp;this._elPageList),
			elPrevPageLinkOn&nbsp;:&nbsp;jindo.$$.getSingle(&quot;a.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;pre&quot;),&nbsp;this._elPageList),
			elNextPageLinkOn&nbsp;:&nbsp;jindo.$$.getSingle(&quot;a.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;next&quot;),&nbsp;this._elPageList),
			elLastPageLinkOn&nbsp;:&nbsp;jindo.$$.getSingle(&quot;a.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;next_end&quot;),&nbsp;this._elPageList),
			elFirstPageLinkOff&nbsp;:&nbsp;jindo.$$.getSingle(&quot;span.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;pre_end&quot;),&nbsp;this._elPageList),
			elPrevPageLinkOff&nbsp;:&nbsp;jindo.$$.getSingle(&quot;span.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;pre&quot;),&nbsp;this._elPageList),
			elNextPageLinkOff&nbsp;:&nbsp;jindo.$$.getSingle(&quot;span.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;next&quot;),&nbsp;this._elPageList),
			elLastPageLinkOff&nbsp;:&nbsp;jindo.$$.getSingle(&quot;span.&quot;&nbsp;+&nbsp;this._wrapPrefix(&quot;next_end&quot;),&nbsp;this._elPageList)
		});
		this.option(htOption&nbsp;||&nbsp;{});
		
		if&nbsp;(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate();
		}
	},
	
	option&nbsp;:&nbsp;function(sName,&nbsp;vValue)&nbsp;{
		var&nbsp;oThis&nbsp;=&nbsp;jindo.Component.prototype.option.apply(this,&nbsp;arguments);

		//&nbsp;setter&nbsp;로써&nbsp;쓰일때만
		if&nbsp;(typeof&nbsp;sName&nbsp;===&nbsp;&#39;object&#39;&nbsp;||&nbsp;typeof&nbsp;vValue&nbsp;!=&nbsp;&#39;undefined&#39;)&nbsp;{
			var&nbsp;sMoveUnit&nbsp;=&nbsp;this.option(&#39;sMoveUnit&#39;);
			var&nbsp;bAlignCenter&nbsp;=&nbsp;this.option(&#39;bAlignCenter&#39;);
			
			//&nbsp;올바르지&nbsp;않은&nbsp;옵션&nbsp;상태일때
			if&nbsp;(bAlignCenter&nbsp;&amp;&amp;&nbsp;sMoveUnit&nbsp;===&nbsp;&#39;pageunit&#39;)&nbsp;{
				throw&nbsp;new&nbsp;Error(&#39;Invalid&nbsp;Option&nbsp;:&nbsp;sMoveUnit&nbsp;can\&#39;t&nbsp;be&nbsp;set&nbsp;to&nbsp;&quot;pageunit&quot;&nbsp;when&nbsp;bAlignCenter&nbsp;is&nbsp;true.&#39;);
			}
		}
		
		return&nbsp;oThis;
	},
	
	/**
		클래스명에&nbsp;Prefix&nbsp;를&nbsp;붙힘
		@param&nbsp;{String}&nbsp;sClassName
	**/
	_wrapPrefix&nbsp;:&nbsp;function(sClassName)&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&#39;sClassPrefix&#39;);
		return&nbsp;sClassPrefix&nbsp;?&nbsp;sClassPrefix&nbsp;+&nbsp;sClassName.replace(/_/g,&nbsp;&#39;-&#39;)&nbsp;:&nbsp;sClassName;
	},
	
	/**
		기준&nbsp;엘리먼트를&nbsp;구한다.
		
		@method&nbsp;getBaseElement
		@return&nbsp;{HTMLElement}
	**/
	getBaseElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elPageList;
	},
	
	/**
		전체&nbsp;아이템의&nbsp;개수를&nbsp;리턴한다.
		
		@method&nbsp;getItemCount
		@return&nbsp;{Number}&nbsp;아이템&nbsp;개수
	**/
	getItemCount&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this.option(&quot;nItem&quot;);
	},
	
	/**
		전체&nbsp;아이템의&nbsp;개수를&nbsp;설정한다.
		
		@method&nbsp;setItemCount
		@param&nbsp;{Number}&nbsp;n&nbsp;아이템&nbsp;개수
	**/
	setItemCount&nbsp;:&nbsp;function(n)&nbsp;{
		this.option({&quot;nItem&quot;&nbsp;:&nbsp;n});
	},
	
	/**
		한&nbsp;페이지에&nbsp;보여줄&nbsp;아이템의&nbsp;개수를&nbsp;구한다.
		
		@method&nbsp;getItemPerPage
		@return&nbsp;{Number}&nbsp;한&nbsp;페이지에&nbsp;보여줄&nbsp;아이템의&nbsp;개수
	**/
	getItemPerPage&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this.option(&quot;nItemPerPage&quot;);
	},
	
	/**
		한&nbsp;페이지에&nbsp;보여줄&nbsp;아이템의&nbsp;개수를&nbsp;설정한다.
		
		@method&nbsp;setItemPerPage
		@param&nbsp;{Object}&nbsp;n&nbsp;아이템&nbsp;개수
	**/
	setItemPerPage&nbsp;:&nbsp;function(n)&nbsp;{
		this.option(&quot;nItemPerPage&quot;,&nbsp;n);
	},
	
	/**
		현재&nbsp;페이지를&nbsp;리턴한다.
		
		@method&nbsp;getCurrentPage
		@return&nbsp;{Number}&nbsp;현재&nbsp;페이지
	**/
	getCurrentPage&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._nCurrentPage;
	},
	
	/**
		해당&nbsp;페이지의&nbsp;첫번째&nbsp;아이템이&nbsp;전체&nbsp;중&nbsp;몇&nbsp;번째&nbsp;아이템인지&nbsp;구한다.
		
		@method&nbsp;getFirstItemOfPage
		@param&nbsp;{Number}&nbsp;n&nbsp;페이지&nbsp;번호
		@return&nbsp;{Number}&nbsp;
	**/
	getFirstItemOfPage&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;this.getItemPerPage()&nbsp;*&nbsp;(n&nbsp;-&nbsp;1)&nbsp;+&nbsp;1;
	},
	
	/**
		아이템의&nbsp;인덱스로부터&nbsp;몇번째&nbsp;페이지인지를&nbsp;구한다.
		
		@method&nbsp;getPageOfItem
		@param&nbsp;{Number}&nbsp;n&nbsp;아이템의&nbsp;인덱스
		@return&nbsp;{Number}&nbsp;
	**/
	getPageOfItem&nbsp;:&nbsp;function(n)&nbsp;{
		return&nbsp;Math.ceil(n&nbsp;/&nbsp;this.getItemPerPage());	
	},
	
	_getLastPage&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;Math.ceil(this.getItemCount()&nbsp;/&nbsp;this.getItemPerPage());
	},

	_getRelativePage&nbsp;:&nbsp;function(sRelative)&nbsp;{
		var&nbsp;nPage&nbsp;=&nbsp;null;
		var&nbsp;bMovePage&nbsp;=&nbsp;this.option(&quot;sMoveUnit&quot;)&nbsp;==&nbsp;&quot;page&quot;;
		var&nbsp;nThisPageList&nbsp;=&nbsp;this._getPageList(this.getCurrentPage());
		
		switch&nbsp;(sRelative)&nbsp;{
		case&nbsp;&quot;pre_end&quot;&nbsp;:
			nPage&nbsp;=&nbsp;1;
			break;
			
		case&nbsp;&quot;next_end&quot;&nbsp;:
			nPage&nbsp;=&nbsp;this._getLastPage();
			break;
			
		case&nbsp;&quot;pre&quot;:
			nPage&nbsp;=&nbsp;bMovePage&nbsp;?&nbsp;this.getCurrentPage()&nbsp;-&nbsp;1&nbsp;:&nbsp;(nThisPageList&nbsp;-&nbsp;1)&nbsp;*&nbsp;this.option(&quot;nPagePerPageList&quot;);
			break;
			
		case&nbsp;&quot;next&quot;:
			nPage&nbsp;=&nbsp;bMovePage&nbsp;?&nbsp;this.getCurrentPage()&nbsp;+&nbsp;1&nbsp;:&nbsp;(nThisPageList)&nbsp;*&nbsp;this.option(&quot;nPagePerPageList&quot;)&nbsp;+&nbsp;1;
			break;
		}
		
		return&nbsp;nPage;
	},
	
	/**
		몇번째&nbsp;페이지&nbsp;리스트인지&nbsp;구함
		@param&nbsp;{Number}&nbsp;nThisPage
	**/
	_getPageList&nbsp;:&nbsp;function(nThisPage)&nbsp;{
		if&nbsp;(this.option(&quot;bAlignCenter&quot;))&nbsp;{
			var&nbsp;nLeft&nbsp;=&nbsp;Math.floor(this.option(&quot;nPagePerPageList&quot;)&nbsp;/&nbsp;2);
			var&nbsp;nPageList&nbsp;=&nbsp;nThisPage&nbsp;-&nbsp;nLeft;
			nPageList&nbsp;=&nbsp;Math.max(nPageList,&nbsp;1);
			nPageList&nbsp;=&nbsp;Math.min(nPageList,&nbsp;this._getLastPage());&nbsp;
			return&nbsp;nPageList;
		}
		return&nbsp;Math.ceil(nThisPage&nbsp;/&nbsp;this.option(&quot;nPagePerPageList&quot;));
	},
	
	_isIn&nbsp;:&nbsp;function(el,&nbsp;elParent)&nbsp;{
		if&nbsp;(!elParent)&nbsp;{
			return&nbsp;false;
		}
		return&nbsp;(el&nbsp;===&nbsp;elParent)&nbsp;?&nbsp;true&nbsp;:&nbsp;jindo.$Element(el).isChildOf(elParent);&nbsp;
	},
	
	_getPageElement&nbsp;:&nbsp;function(el)&nbsp;{
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;nLength&nbsp;=&nbsp;this._waPage.$value().length;&nbsp;i&nbsp;&lt;&nbsp;nLength;&nbsp;i++)&nbsp;{
			var&nbsp;elPage&nbsp;=&nbsp;this._waPage.get(i);
			if&nbsp;(this._isIn(el,&nbsp;elPage))&nbsp;{
				return&nbsp;elPage;
			}
		}
		return&nbsp;null;
	},
	
	_onClickPageList&nbsp;:&nbsp;function(we)&nbsp;{
		we.stop(jindo.$Event.CANCEL_DEFAULT);
		
		var&nbsp;nPage&nbsp;=&nbsp;null,
			htOption&nbsp;=&nbsp;this.option(),
			el&nbsp;=&nbsp;we.element;
			
		if&nbsp;(this._isIn(el,&nbsp;htOption.elFirstPageLinkOn))&nbsp;{
			nPage&nbsp;=&nbsp;this._getRelativePage(&quot;pre_end&quot;);
		}&nbsp;else&nbsp;if&nbsp;(this._isIn(el,&nbsp;htOption.elPrevPageLinkOn))&nbsp;{
			nPage&nbsp;=&nbsp;this._getRelativePage(&quot;pre&quot;);
		}&nbsp;else&nbsp;if&nbsp;(this._isIn(el,&nbsp;htOption.elNextPageLinkOn))&nbsp;{
			nPage&nbsp;=&nbsp;this._getRelativePage(&quot;next&quot;);
		}&nbsp;else&nbsp;if&nbsp;(this._isIn(el,&nbsp;htOption.elLastPageLinkOn))&nbsp;{
			nPage&nbsp;=&nbsp;this._getRelativePage(&quot;next_end&quot;);				
		}&nbsp;else&nbsp;{
			var&nbsp;elPage&nbsp;=&nbsp;this._getPageElement(el);
			if&nbsp;(elPage)&nbsp;{
				nPage&nbsp;=&nbsp;parseInt(jindo.$Element(elPage).text(),&nbsp;10);
			}&nbsp;else&nbsp;{
				return;
			}
		}	
		
		/**
			페이지&nbsp;이동을&nbsp;위한&nbsp;숫자나&nbsp;버튼을&nbsp;클릭했을때&nbsp;발생
			
			@event&nbsp;click
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Number}&nbsp;nPage&nbsp;클릭해서&nbsp;이동할&nbsp;페이지
			@param&nbsp;{jindo.$Event}&nbsp;weEvent&nbsp;클릭&nbsp;이벤트&nbsp;객체
			@param&nbsp;{Function}&nbsp;stop&nbsp;페이지&nbsp;이동을&nbsp;정지한다
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oPagination.attach(&quot;click&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					//&nbsp;클릭한&nbsp;페이지&nbsp;번호
					var&nbsp;nClickedPage&nbsp;=&nbsp;oCustomEvent.nPage;
					
					//&nbsp;만약,&nbsp;페이지를&nbsp;이동하고&nbsp;싶지&nbsp;않다면
					//&nbsp;oCustomEvent.stop()을&nbsp;호출하여&nbsp;중지할&nbsp;수&nbsp;있다.
					if(&nbsp;nClickedPage&nbsp;===&nbsp;0&nbsp;)&nbsp;{
						oCustomEvent.stop();
					}
				});
		**/
		if&nbsp;(!this.fireEvent(&quot;click&quot;,&nbsp;{&nbsp;nPage:&nbsp;nPage,&nbsp;weEvent&nbsp;:&nbsp;we&nbsp;}))&nbsp;{
			return;
		}
		
		this.movePageTo(nPage);
	},
	
	_convertToAvailPage&nbsp;:&nbsp;function(nPage)&nbsp;{
		var&nbsp;nLastPage&nbsp;=&nbsp;this._getLastPage();
		nPage&nbsp;=&nbsp;Math.max(nPage,&nbsp;1);
		nPage&nbsp;=&nbsp;Math.min(nPage,&nbsp;nLastPage);&nbsp;
		return&nbsp;nPage;
	},
	
	/**
		지정한&nbsp;페이지로&nbsp;이동하고&nbsp;페이지&nbsp;목록을&nbsp;다시&nbsp;그린다.
		이동하기전&nbsp;beforeMove,&nbsp;이동후에&nbsp;move&nbsp;커스텀&nbsp;이벤트를&nbsp;발생한다.
		
		@method&nbsp;movePageTo
		@param&nbsp;{Number}&nbsp;nPage&nbsp;이동할&nbsp;페이지
		@param&nbsp;{Boolean}&nbsp;[bFireEvent]&nbsp;커스텀&nbsp;이벤트의&nbsp;발생&nbsp;여부&nbsp;(디폴트&nbsp;true)
	**/
	movePageTo&nbsp;:&nbsp;function(nPage,&nbsp;bFireEvent){
		if&nbsp;(typeof&nbsp;bFireEvent&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			bFireEvent&nbsp;=&nbsp;true;
		}
		
		nPage&nbsp;=&nbsp;this._convertToAvailPage(nPage);
		this._nCurrentPage&nbsp;=&nbsp;nPage;
		
		if&nbsp;(bFireEvent)&nbsp;{
			/**
				페이지&nbsp;이동이&nbsp;수행되기&nbsp;직전에&nbsp;발생
				
				@event&nbsp;beforeMove
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{Number}&nbsp;nPage&nbsp;이동하게&nbsp;될&nbsp;페이지
				@param&nbsp;{Function}&nbsp;stop&nbsp;페이지&nbsp;이동을&nbsp;정지한다
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oPagination.attach(&quot;beforeMove&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						//&nbsp;이동하게&nbsp;될&nbsp;페이지
						var&nbsp;nDstPage&nbsp;=&nbsp;oCustomEvent.nPage;
						
						//&nbsp;만약,&nbsp;페이지를&nbsp;이동하고&nbsp;싶지&nbsp;않다면
						//&nbsp;oCustomEvent.stop()을&nbsp;호출하여&nbsp;중지할&nbsp;수&nbsp;있다.
						if(&nbsp;nDstPage&nbsp;===&nbsp;0&nbsp;)&nbsp;{
							oCustomEvent.stop();
						}
					});
			**/
			if&nbsp;(!this.fireEvent(&quot;beforeMove&quot;,&nbsp;{
				nPage:&nbsp;nPage
			}))&nbsp;{
				return;
			}
		}
		
		this._paginate(nPage);
		
		if&nbsp;(bFireEvent)&nbsp;{
			/**
				페이지&nbsp;이동이&nbsp;완료된&nbsp;시점에서&nbsp;발생
				
				@event&nbsp;move
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{Number}&nbsp;nPage&nbsp;사용자&nbsp;클릭의&nbsp;결과로&nbsp;이동한&nbsp;페이지
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oPagination.attach(&quot;move&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						//&nbsp;사용자&nbsp;&nbsp;클릭의&nbsp;결과로&nbsp;이동한&nbsp;페이지
						var&nbsp;nCurrentPage&nbsp;=&nbsp;oCustomEvent.nPage;
					});
			**/
			this.fireEvent(&quot;move&quot;,&nbsp;{
				nPage:&nbsp;nPage
			});
		}
	},
	
	/**
		페이징을&nbsp;다시&nbsp;그린다.
		
		@method&nbsp;reset
		@param&nbsp;{Number}&nbsp;nItemCount&nbsp;아이템의&nbsp;개수가&nbsp;바뀌었을&nbsp;경우&nbsp;설정해준다.
	**/
	reset&nbsp;:&nbsp;function(nItemCount)&nbsp;{
		if&nbsp;(typeof&nbsp;nItemCount&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			nItemCount&nbsp;=&nbsp;this.option(&quot;nItem&quot;);
		}&nbsp;&nbsp;
		
		this.setItemCount(nItemCount);
		this.movePageTo(1,&nbsp;false);
	},
	
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;this._welPageList.preventTapHighlight(true);
		this._fClickPage.attach(this._elPageList,&nbsp;&quot;click&quot;);
		this.setItemCount(this.option(&quot;nItem&quot;));
		this.movePageTo(this.option(&quot;nPage&quot;),&nbsp;false);
		this._welPageList.addClass(this._wrapPrefix(&quot;loaded&quot;));	
	},
	
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;this._welPageList.preventTapHighlight(false);
		this._fClickPage.detach(this._elPageList,&nbsp;&quot;click&quot;);
		this._welPageList.removeClass(this._wrapPrefix(&quot;loaded&quot;));	
	},
	
	_addTextNode&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;sTextNode&nbsp;=&nbsp;this.option(&quot;sInsertTextNode&quot;);
		this._elPageList.appendChild(document.createTextNode(sTextNode));		
	},
	
	_paginate&nbsp;:&nbsp;function(nPage){
		this._empty();
		this._addTextNode();
		
		var&nbsp;htOption&nbsp;=&nbsp;this.option(),
			elFirstPageLinkOn&nbsp;=&nbsp;htOption.elFirstPageLinkOn,&nbsp;
			elPrevPageLinkOn&nbsp;=&nbsp;htOption.elPrevPageLinkOn,
			elNextPageLinkOn&nbsp;=&nbsp;htOption.elNextPageLinkOn,
			elLastPageLinkOn&nbsp;=&nbsp;htOption.elLastPageLinkOn,
			elFirstPageLinkOff&nbsp;=&nbsp;htOption.elFirstPageLinkOff,
			elPrevPageLinkOff&nbsp;=&nbsp;htOption.elPrevPageLinkOff,&nbsp;
			elNextPageLinkOff&nbsp;=&nbsp;htOption.elNextPageLinkOff,&nbsp;
			elLastPageLinkOff&nbsp;=&nbsp;htOption.elLastPageLinkOff,
			nLastPage&nbsp;=&nbsp;this._getLastPage(),
			nThisPageList&nbsp;=&nbsp;this._getPageList(nPage),
			nLastPageList&nbsp;=&nbsp;this._getPageList(nLastPage);
		
		if&nbsp;(nLastPage&nbsp;===&nbsp;0)&nbsp;{
			this._welPageList.addClass(this._wrapPrefix(&quot;no-result&quot;));
		}&nbsp;else&nbsp;if&nbsp;(nLastPage&nbsp;==&nbsp;1)&nbsp;{
			this._welPageList.addClass(this._wrapPrefix(&quot;only-one&quot;)).removeClass(this._wrapPrefix(&quot;no-result&quot;));
		}&nbsp;else&nbsp;{
			this._welPageList.removeClass(this._wrapPrefix(&quot;only-one&quot;)).removeClass(this._wrapPrefix(&quot;no-result&quot;));
		}
		
		var&nbsp;nFirstPageOfThisPageList,&nbsp;nLastPageOfThisPageList;
		if&nbsp;(htOption.bAlignCenter)&nbsp;{
			var&nbsp;nLeft&nbsp;=&nbsp;Math.floor(htOption.nPagePerPageList&nbsp;/&nbsp;2);
			nFirstPageOfThisPageList&nbsp;=&nbsp;nPage&nbsp;-&nbsp;nLeft;
			nFirstPageOfThisPageList&nbsp;=&nbsp;Math.max(nFirstPageOfThisPageList,&nbsp;1);
			nLastPageOfThisPageList&nbsp;=&nbsp;nFirstPageOfThisPageList&nbsp;+&nbsp;htOption.nPagePerPageList&nbsp;-&nbsp;1;
			if&nbsp;(nLastPageOfThisPageList&nbsp;&gt;&nbsp;nLastPage)&nbsp;{
				nFirstPageOfThisPageList&nbsp;=&nbsp;nLastPage&nbsp;-&nbsp;htOption.nPagePerPageList&nbsp;+&nbsp;1;
				nFirstPageOfThisPageList&nbsp;=&nbsp;Math.max(nFirstPageOfThisPageList,&nbsp;1);
				nLastPageOfThisPageList&nbsp;=&nbsp;nLastPage;
			}
		}&nbsp;else&nbsp;{
			nFirstPageOfThisPageList&nbsp;=&nbsp;(nThisPageList&nbsp;-&nbsp;1)&nbsp;*&nbsp;htOption.nPagePerPageList&nbsp;+&nbsp;1;
			nLastPageOfThisPageList&nbsp;=&nbsp;(nThisPageList)&nbsp;*&nbsp;htOption.nPagePerPageList;
			nLastPageOfThisPageList&nbsp;=&nbsp;Math.min(nLastPageOfThisPageList,&nbsp;nLastPage);
		}
		
		if&nbsp;(htOption.sMoveUnit&nbsp;==&nbsp;&quot;page&quot;)&nbsp;{
			nThisPageList&nbsp;=&nbsp;nPage;
			nLastPageList&nbsp;=&nbsp;nLastPage;
		}

		//first
		if&nbsp;(nPage&nbsp;&gt;&nbsp;1)&nbsp;{
			if&nbsp;(elFirstPageLinkOn)&nbsp;{
				this._welPageList.append(elFirstPageLinkOn);
				this._addTextNode();
			}
		}&nbsp;else&nbsp;{
			if&nbsp;(elFirstPageLinkOff)&nbsp;{
				this._welPageList.append(elFirstPageLinkOff);
				this._addTextNode();
			}
		}

		//prev
		if&nbsp;(nThisPageList&nbsp;&gt;&nbsp;1)&nbsp;{
			if&nbsp;(elPrevPageLinkOn)&nbsp;{
				this._welPageList.append(elPrevPageLinkOn);
				this._addTextNode();
			}
		}&nbsp;else&nbsp;{
			if&nbsp;(elPrevPageLinkOff)&nbsp;{
				this._welPageList.append(elPrevPageLinkOff);
				this._addTextNode();
			}	
		}		

		var&nbsp;el,&nbsp;wel;
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;nFirstPageOfThisPageList;&nbsp;i&nbsp;&lt;=&nbsp;nLastPageOfThisPageList&nbsp;;&nbsp;i++)&nbsp;{
			if&nbsp;(i&nbsp;==&nbsp;nPage)&nbsp;{
				el&nbsp;=&nbsp;jindo.$(jindo.$Template(htOption.sCurrentPageTemplate).process({&nbsp;page&nbsp;:&nbsp;i.toString()&nbsp;}));
			}&nbsp;else&nbsp;{
				el&nbsp;=&nbsp;jindo.$(jindo.$Template(htOption.sPageTemplate).process({&nbsp;page&nbsp;:&nbsp;i.toString()&nbsp;}));
				this._waPage.push(el);
			}
				
			wel&nbsp;=&nbsp;jindo.$Element(el);
			if&nbsp;(i&nbsp;==&nbsp;nFirstPageOfThisPageList)&nbsp;{
				wel.addClass(this._wrapPrefix(this.option(&quot;sClassFirst&quot;)));
			}
			if&nbsp;(i&nbsp;==&nbsp;nLastPageOfThisPageList)&nbsp;{
				wel.addClass(this._wrapPrefix(this.option(&quot;sClassLast&quot;)));
			}
			this._welPageList.append(el);
			
			this._addTextNode();
		}

		//next
		if&nbsp;(nThisPageList&nbsp;&lt;&nbsp;nLastPageList)&nbsp;{
			if&nbsp;(elNextPageLinkOn)&nbsp;{
				this._welPageList.append(elNextPageLinkOn);
				this._addTextNode();
			}
		}&nbsp;else&nbsp;{
			if&nbsp;(elNextPageLinkOff)&nbsp;{
				this._welPageList.append(elNextPageLinkOff);
				this._addTextNode();
			}
		}
		
		//last
		if&nbsp;(nPage&nbsp;&lt;&nbsp;nLastPage)&nbsp;{
			if&nbsp;(elLastPageLinkOn)&nbsp;{
				this._welPageList.append(elLastPageLinkOn);
				this._addTextNode();
			}
		}&nbsp;else&nbsp;{
			if&nbsp;(elLastPageLinkOff)&nbsp;{
				this._welPageList.append(elLastPageLinkOff);
				this._addTextNode();
			}
		}
	},
	
	_empty&nbsp;:&nbsp;function(){
		var&nbsp;htOption&nbsp;=&nbsp;this.option(),
			elFirstPageLinkOn&nbsp;=&nbsp;htOption.elFirstPageLinkOn,&nbsp;
			elPrevPageLinkOn&nbsp;=&nbsp;htOption.elPrevPageLinkOn,
			elNextPageLinkOn&nbsp;=&nbsp;htOption.elNextPageLinkOn,
			elLastPageLinkOn&nbsp;=&nbsp;htOption.elLastPageLinkOn,
			elFirstPageLinkOff&nbsp;=&nbsp;htOption.elFirstPageLinkOff,
			elPrevPageLinkOff&nbsp;=&nbsp;htOption.elPrevPageLinkOff,&nbsp;
			elNextPageLinkOff&nbsp;=&nbsp;htOption.elNextPageLinkOff,&nbsp;
			elLastPageLinkOff&nbsp;=&nbsp;htOption.elLastPageLinkOff;
			
		htOption.elFirstPageLinkOn&nbsp;=&nbsp;this._clone(elFirstPageLinkOn);
		htOption.elPrevPageLinkOn&nbsp;=&nbsp;this._clone(elPrevPageLinkOn);
		htOption.elLastPageLinkOn&nbsp;=&nbsp;this._clone(elLastPageLinkOn);
		htOption.elNextPageLinkOn&nbsp;=&nbsp;this._clone(elNextPageLinkOn);
		htOption.elFirstPageLinkOff&nbsp;=&nbsp;this._clone(elFirstPageLinkOff);
		htOption.elPrevPageLinkOff&nbsp;=&nbsp;this._clone(elPrevPageLinkOff);
		htOption.elLastPageLinkOff&nbsp;=&nbsp;this._clone(elLastPageLinkOff);
		htOption.elNextPageLinkOff&nbsp;=&nbsp;this._clone(elNextPageLinkOff);
		this._waPage.empty();
		this._welPageList.empty();
	},
	
	_clone&nbsp;:&nbsp;function(el)&nbsp;{
		if&nbsp;(el&nbsp;&amp;&amp;&nbsp;el.cloneNode)&nbsp;{
			return&nbsp;el.cloneNode(true);
		}
		return&nbsp;el;
	}
}).extend(jindo.UIComponent);
</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>